<template>
  <div class="wrap">
    <div class="headWrap">
      <div class="left">
        <img :src="resForumInfo.userHeadImg" alt="" class="userHead" @click="jumpForumPersonCenter(resForumInfo.userId)"/>
        <em class="userName">{{ resForumInfo.nickName }}</em>
        <em class="time">
          {{ resForumInfo.createTime }}
        </em>
      </div>
       <div class="right" @click="changeAttion">
        {{ isAttention ? "取消关注" : "关注" }}
      </div>
      <div class="leftpoint">
        <img
          src="@/assets/point.png"
          alt=""
          class="point"
          @click="replyOptions(resForumInfo, 0)"
        />
      </div>
     
    </div>
    <div class="swiperContaner" v-if="resForumInfo.imageUrl">
      <van-swipe :autoplay="3000">
        <van-swipe-item
          v-for="(image, index) in images"
          :key="index"
          @click="look()"
        >
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="productionList">
      <div class="forumTitle">
        {{ resForumInfo.content }}
      </div>
      <div class="statisticsWrap">
        <div class="statisticsItem" @click="getAddArticleLike">
          <img
            src="@/assets/redHeart.png"
            alt=""
            class="redHeart"
            v-if="resForumInfo.isLike"
          />
          <img src="@/assets/greyHeart.png" alt="" class="redHeart" v-else />
          <em class="number">{{ resForumInfo.likeNum }}</em>
        </div>
        <div class="statisticsItem" style="margin-left: 20px">
          <img src="@/assets/msg.png" alt="" class="redHeart" />
          <em class="number">{{ resForumInfo.commentNum }}</em>
        </div>
      </div>
      <div class="productionItem" v-if="resForumInfo.isShowShop == 1">
        <div class="proIntroWrap">
          <div class="proIntroLeft">
            <img :src="resForumInfo.shopHeadImg" alt="" class="proPoster" />
            <!-- <img src="@/assets/vip.png" alt="" class="vipImg" /> -->
          </div>
          <div class="proIntroRight">
            <div class="proIntro">{{ resForumInfo.shopName }}</div>
            <div class="workTime">
              <div class="line">{{ resForumInfo.schoolName }}</div>
              <!-- <div class="line">成都航空职业技术学院龙泉驿校区</div> -->
            </div>
          </div>
          <div class="goShop" @click="jumpShopInfo()">进店逛逛</div>
        </div>
      </div>
    </div>
    <div style="background-color: #f2f4fa; height: 5px"></div>
    <div class="commentWrap">
      <div class="commentItem" v-for="(item, index) in resCommentList" :key="index">
        <img :src="$imgUrl + item.headImage" alt="" class="commentLeft" @click="jumpForumPersonCenter(item.userId)"/>
        <div class="commentRight">
          <div class="name">
            <em class="nameText">{{ item.nickName }}</em>
            <img
              src="@/assets/point.png"
              alt=""
              class="point2"
              @click="replyOptions(item, 1)"
            />
          </div>
          <div class="commentText">
            {{ item.content }}
          </div>
          <div
            class="commentReply"
            @click="replyInfo(item.id)"
            v-if="item.replyNum !== 0"
          >
            <em>共{{ item.replyNum }}条回复</em>
            <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
          </div>
          <div class="commStatisticsWrap">
            <div class="date">{{ item.createTime }}</div>
            <div class="commStatisticsItem" @click="getAddCommentLike(item.id)">
              <img
                src="@/assets/redHeart.png"
                alt=""
                class="redHeart"
                v-if="item.isLike"
              />
              <img src="@/assets/greyHeart.png" alt="" class="redHeart" v-else />
              <em class="number number2">{{ item.likeNum }}</em>
            </div>
            <div
              class="commStatisticsItem"
              style="margin-right: 20px"
              @click="replyComment(item)"
            >
              <img src="@/assets/msg.png" alt="" class="redHeart" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="commentRemark">
      <div class="input">
        <van-field
          v-model="CommentText"
          rows="1"
          autosize
          type="textarea"
          placeholder="留下你的精彩评论吧"
        />
      </div>
      <div class="sendComment" @click="getPublishComment">发送</div>
      <!-- <img src="@/assets/at.png" alt="" class="at" />
      <img src="@/assets/emg.png" alt="" class="emg" /> -->
    </div>
    <div style="height: 80px"></div>
    <!-- 遮罩层-举报、删除、回复： -->
    <div class="maskWrap" v-if="show">
      <div class="maskBg" @click="show = false"></div>
      <div class="chooseNumWrap">
        <!-- <div class="optionsItem">回复</div> -->
        <div class="optionsItem" v-if="isDeleShow" @click="deleOptions">删除</div>
        <div class="optionsItem" @click="jumpReportkinds()" v-else>举报</div>
        <div class="optionsItem dele" @click="show = false">取消</div>
      </div>
    </div>
    <!-- 回复评论： -->
    <div class="maskWrap" v-if="showComment">
      <div class="maskBg" @click="showComment = false"></div>
      <div class="chooseNumWrap">
        <div class="input inputComment">
          <van-field
            v-model="replyContent"
            rows="1"
            autosize
            type="textarea"
            :placeholder="palceholderText"
          />
        </div>
        <div class="sendComment" @click="getPublishReply">发送</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swipe, SwipeItem, Field, Dialog ,ImagePreview} from "vant";
import {
  apiArticleDetails,
  apiArticleCommentList,
  apiPublishArticleComment,
  apiPublishReply,
  apiAddCommentLike,
  apiAddArticleLike,
  apiCancel,
  apiAdd,
  apiRelation,
  apiDelete,
  apiDeleteCommentById,
} from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      show: false,
      showComment: false,
      images: [],
      reqId: this.$route.query.forumId, //帖子id
      resForumInfo: "", //帖子详情  
      resCommentList: "", //帖子评论列表
      CommentText: "", //评论内容
      replyContent: "", //评论评论的内容
      palceholderText: "回复评论",
      willRepyItemData: "",
      isAttention: "", //是否关注用户
      whichType: "", //0是楼主的point操作，1是评论的point操作
      isDeleShow: "", //是否是自己的帖子或者评论 决定是展示删除还是举报
      willOptionsItemData: "", //要操作的哪一条数据
    };
  },
  mounted() {
    this.getArticleDetails();
    this.getArticleCommentList();
    // document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
  },
  methods: {
    // 查看图片
    look(){
    ImagePreview(this.images);
    },
    //是否关注用户：
    getRelation() {
      apiRelation({
        id: this.resForumInfo.userId,
      }).then((res) => {
        console.log("是否关注", res.data);
        this.isAttention = res.data;
      });
    },
    //取消关注
    getCancel() {
      apiCancel({
        toUserId: this.resForumInfo.userId,
      }).then((res) => {
        this.getRelation();
      });
    },
    //关注
    getAdd() {
      apiAdd({
        toUserId: this.resForumInfo.userId,
      }).then((res) => {
        this.getRelation();
      });
    },
    // 切换关注or取消关注的状态：
    changeAttion() {
      if (this.isAttention) {
        //当前是关注状态 操作为取消关注
        this.getCancel();
      } else {
        this.getAdd();
      }
    },
    //获取帖子详情
    getArticleDetails() {
      this.images = []
      apiArticleDetails({
        id: this.reqId,
      }).then((res) => {
        this.resForumInfo = res.data;
        this.getRelation();
        this.resForumInfo.userHeadImg = `${this.$imgUrl}${this.resForumInfo.userHeadImg}`;
        if (this.resForumInfo.shopId) {
          this.resForumInfo.shopHeadImg = `${this.$imgUrl}${this.resForumInfo.shopHeadImg}`;
        }
         console.log("data数据", this.resForumInfo);
         if( this.resForumInfo.imageUrl==''){
           return
         }
        this.resForumInfo.imageUrl = this.resForumInfo.imageUrl.split(",");
        this.resForumInfo.imageUrl.map((item) => {
          this.images.push(this.$imgUrl + item);
          console.log(this.images);
        });
        console.log("data数据", this.resForumInfo);
      });
    },
    //获取帖子评论详情
    getArticleCommentList() {
      apiArticleCommentList({
        id: this.reqId,
      }).then((res) => {
        this.resCommentList = res.data;
        console.log("data评论数据", this.resCommentList);
      });
    },
    //发布帖子评论:
    getPublishComment() {
      apiPublishArticleComment({
        articleId: this.reqId,
        content: this.CommentText,
      }).then((res) => {
        this.CommentText = "";
        this.getArticleCommentList();
        this.getArticleDetails();
      });
    },
    //评论帖子的评论step01：
    replyComment(dataItem) {
      this.showComment = true;
      this.palceholderText = "回复" + dataItem.nickName + "的评论";
      this.willRepyItemData = dataItem;
    },
    //评论帖子的评论step02：
    getPublishReply() {
      apiPublishReply({
        commentId: this.willRepyItemData.id,
        content: this.replyContent,
        toUserId: this.willRepyItemData.userId,
        type: 0,
      }).then((res) => {
        if (res.code == 200) {
          this.showComment = false;
          this.replyContent = "";
          this.getArticleCommentList();
        }
      });
    },
    //点赞帖子：
    getAddArticleLike() {
      apiAddArticleLike({
        articleId: this.reqId,
      }).then((res) => {
        if (res.code == 200) {
          this.getArticleDetails();
        }
      });
    },
    //点赞评论：
    getAddCommentLike(id) {
      apiAddCommentLike({
        commentId: id,
      }).then((res) => {
        if (res.code == 200) {
          this.getArticleCommentList();
        }
      });
    },
    //  删除操作：whichType：0-删除帖子、1-删除评论
    deleOptions() {
      if (this.whichType == 0) {
        this.deleForum();
      } else {
        this.deleComment();
      }
    },
    //删帖：
    deleForum() {
      var that = this;
      Dialog.confirm({
        message: "确定删除此帖子?",
      }).then(() => {
          // on confirm
          apiDelete({
            id: that.reqId * 1,
          }).then((res) => {
            if (res.code == 200) {
              that.$Toast.success("删除成功!");
              that.show = false
              that.$router.push({
                path: "/pages/forumIndex",
                query: {},
              });
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //删除评论：
    deleComment() {
      var that = this;
      Dialog.confirm({
        message: "确定删除此评论?",
      })
        .then(() => {
          // on confirm
          apiDeleteCommentById({
            id: this.willOptionsItemData.id,
          }).then((res) => {
            if (res.code == 200) {
              that.$toast.success("删除成功!");
              that.show = false
              that.getArticleCommentList()
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //举报：
    jumpReportkinds() {
      let obj ={
          dataJump: this.willOptionsItemData,
          contentType: this.whichType==0?0:1, //评论类型：1,帖子类型：0
       }
      this.$store.commit('reportPara',obj)
      this.$router.push({
        path: "/pages/reportkinds",
        query: obj
      });
    },
    replyOptions(dataItem, i) {
      this.whichType = i;
      this.isDeleShow = dataItem.isCurrent;
      this.show = true;
      this.willOptionsItemData = dataItem;
    },
    replyInfo(i) {
      var that = this;
      this.$router.push({
        path: "/pages/replyInfoList",
        query: {
          //传递参数
          replyId: i,
          forumId: that.reqId,
        },
      });
    },
    jumpShopInfo() {
      this.$router.push({
        path: "/pages/shopInfo",
        query: {
          //传递参数
          shopId:this.resForumInfo.shopId
        },
      });
    },
    //跳转论坛个人主页
    jumpForumPersonCenter(id){
      this.$router.push({
        path: "/pages/forumPersonalCenter",
        query: {
          userId: id
        },
      });
    },
  },
  created() {},
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Field.name]: Field,
    [Dialog.name]: Dialog,
     [ImagePreview.Component.name]: ImagePreview.Component,
  },
};
</script>

<style scoped>
/deep/.van-swipe-item img {
  width: 100% !important;
  /* height: 150px !important; */
}
.headWrap {
  overflow: hidden;
  /* width: 93%;
  margin: 20px auto; */
  width: 100%;
  background-color: #f2f4fa;
  padding: 20px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left {
  display: flex;
  margin-left: 20px;
  align-items: center;
}
.leftpoint {
  float: right;
  margin-right: 20px;
}
.point {
  display: inline-block;
  width: 13px;
  height: 3px;
  margin-top: 5px;
}
.userHead {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  align-items: center;
}
.userName {
  font-size: 14px;
  font-weight: 600;
  color: #181818;
  display: inline-block;
  align-items: center;
  margin-left: 10px;
}
.time {
  margin-left: 10px;
  font-size: 10px;
  font-weight: 300;
  color: #999999;
}
.right {
  float: right;
  height: 23px;
  line-height: 23px;
  background: #b5b3b2;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 500;
  color: #ffffff;
  padding: 0px 8px;
  width: 50px;
  text-align: center;
  margin-right: 10px;
}
.swiperContaner .van-swipe {
  margin-top: 15px;
  /* margin-bottom: 20px; */
  width: 93%;
  margin-left: 3.5%;
  height: 230px;
  background: #181818;
  /* box-shadow: 0px 6px 8px 0px rgba(148, 148, 148, 0.16); */
  border-radius: 20px 20px 0px 0px;
  /* .van-swipe */
}
.swiperContaner > img {
  width: 100%;
  height: auto;
}
.van-swipe-item {
  height: 150px;
}
.forumTitle {
  width: 93%;
  margin: 0 auto;
  font-size: 14px;
  font-weight: 500;
  color: #181818;
  line-height: 18px;
  padding: 15px;
}
.statisticsWrap {
  width: 93%;
  margin: 0 auto;
  min-height: 33px;
}
.statisticsItem {
  float: left;
}
.redHeart {
  width: 13px;
  height: 11px;
}
.number {
  font-size: 10px;
  font-weight: 300;
  color: #181818;
  padding-left: 5px;
}
.productionList {
  width: calc(100% - 30px);
  background: #ffffff;
  margin: 0 auto;
}
.productionItem {
  min-height: 85px;
  padding: 15px;
  margin-top: 15px;
  margin-bottom: 30px;
}
.proIntroWrap {
  width: 100%;
  margin-top: 10px;
}
.proIntroLeft {
  float: left;
}
.proPoster {
  width: 25%;
  height: 75px;
  position: absolute;
}
.vipImg {
  width: 30px;
  height: 15px;
  position: absolute;
  left: 90px;
}
.proIntroRight {
  width: 45%;
  float: left;
  margin-left: 32%;
}
.goShop {
  width: 20%;
  float: right;
  height: 25px;
  line-height: 25px;
  border: 1px solid #181818;
  border-radius: 25px;
  font-size: 13px;
  font-weight: 500;
  color: #181818;
  margin-top: 25px;
  text-align: center;
}
.proIntro {
  font-size: 10px;
  font-weight: 400;
  color: #181818;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 10px;
}
.workTime {
  width: 100%;
  font-size: 10px;
  font-weight: 400;
  color: #999999;
  margin-top: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.commentWrap {
  width: 100%;
  background-color: #fff;
}
.commentItem {
  border-bottom: 1px solid #e5e5e5;
  padding: 15px 0px;
  overflow: hidden;
}
.commentLeft {
  width: 37px;
  height: 37px;
  border-radius: 37px;
  float: left;
  margin-left: 15px;
}
.commentRight {
  width: calc(100% - 30px - 37px - 10px);
  margin-left: 10px;
  float: left;
  font-weight: 400;
  color: #181818;
  font-size: 12px;
}
.name {
  font-size: 11px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.nameText {
  display: inline-block;
}
.point2 {
  display: inline-block;
  width: 13px;
  height: 3px;
  margin-top: 5px;
}
.commentText {
  margin-top: 10px;
  margin-bottom: 12px;
}

.commentReply {
  width: calc(100% - 12px);
  height: 25px;
  line-height: 25px;
  background: #f2f4fa;
  border-radius: 13px;
  padding-left: 12px;
}
.rightArrow {
  width: 4px;
  height: 7px;
  padding-left: 6px;
}
.commStatisticsWrap {
  width: calc(100% - 12px);
  padding-bottom: 15px;
  margin-top: 16px;
}
.date {
  float: left;
  font-size: 10px;
  font-weight: 300;
  color: #999999;
}
.commStatisticsItem {
  float: right;
}
.number2 {
  font-size: 10px;
  font-weight: 300;
  color: #999999;
}
.maskWrap {
}
.maskBg {
  width: 100%;
  min-height: 100vh;
  opacity: 0.35;
  background-color: #000;
  position: fixed;
  top: 0px;
}
.chooseNumWrap {
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 0px;
  border-radius: 20px 20px 0px 0px;
}
.inputComment {
  height: 100px;
}
.inputComment .van-cell {
  height: 80px !important;
}
.optionsItem {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
  color: #000;
  font-size: 14px;
  text-align: center;
}
.dele {
  background-color: #eee;
  border-radius: 20px;
  width: 90%;
  margin: 5px auto;
  height: 40px;
  line-height: 40px;
}
.commentRemark {
  width: 100%;
  position: fixed;
  bottom: 0;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.12);
  border-radius: 24px 24px 0px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.input {
  border-radius: 20px;
  width: 70%;
  margin: 15px 20px;
}
.sendComment {
  width: 20%;
  text-align: center;
  margin-right: 5%;
  background-color: #ff955e;
  font-size: 14px;
  padding: 5px 12px;
  border-radius: 5px;
  color: #fff;
}
.van-cell {
  border-radius: 20px;
  background-color: #f2f4fa;
}
.at {
  float: left;
  width: 18px;
  height: 18px;
  margin-top: 30px;
}
.emg {
  float: left;
  width: 18px;
  height: 18px;
  margin: 0px 20px 0px 16px;
  margin-top: 30px;
}
</style>
